<template>
<div class="account-pages">
    <div class="account-box">
        <div class="account-logo-box pt-3">
            <h2 class="text-center text-dark">TradeLink</h2>
            <h6 class="text-center font-bold mt-3">{{$t('register')}}</h6>
        </div>
        <div class="account-content pt-3">
            <form class="form-horizontal">
                <div class="form-group row">
                    <div class="col-12">
                        <label for="username">{{$t('label.name')}}</label>
                        <input id="username" class="form-control" type="text" name="user_login"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                               data-parsley-length="[1, 8]" :data-parsley-pattern-message="$t('placeholder.name.pattern',[8])">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-12">
                        <label for="phone">{{$t('label.phone')}}</label>
                        <vue-country-intl type="phone"
                                          v-model="countryCode"
                                          :onlyCountry="onlyCountry"
                                          selectedText=""></vue-country-intl>
                        <input id="phone" class="form-control mt-3" type="text" name="mobile" v-model="mobile"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                               data-parsley-group="captcha"
                               :placeholder="'+'+countryCode">
                        <input type="hidden" name="phonecode" :value="countryCode">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-7">
                        <label for="captcha">{{$t('label.captcha')}}</label>
                        <input id="captcha" class="form-control col-8" type="text" name="mobile_code"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                               data-parsley-pattern="^[0-9]{6}$" :data-parsley-pattern-message="$t('msg.captcha.error')"
                               :placeholder="$t('placeholder.captcha')">
                    </div>
                    <div class="col-5">
                        <label for="captcha">&nbsp;</label>
                        <CountDownBtn class="btn-block"
                                      :seconds="seconds"
                                      :text="$t('btn.resend')"
                                      @click.native="captcha">
                            {{$t('btn.captcha')}}
                        </CountDownBtn>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-12">
                        <label for="password">{{$t('label.password')}}</label>
                        <input id="password" class="form-control" type="password" name="user_pass"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                               data-parsley-pattern="/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,18}$/"
                               :data-parsley-pattern-message="$t('placeholder.password.pattern',[6,8])">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-12">
                        <label for="cpassword">{{$t('label.password.confirm')}}</label>
                        <input id="cpassword" class="form-control" type="password"
                               data-parsley-required="true" :data-parsley-required-message="$t('msg.required.error')"
                               data-parsley-equalto="#password" :data-parsley-equalto-message="$t('msg.password.confirm.fail')">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-12">
                        <label for="inventCode">{{$t('label.invitation.code')}}</label>
                        <input id="inventCode" class="form-control" type="text" name="invent_code"
                               :value="inventCode"
                               data-parsley-pattern="^[a-zA-Z0-9]{8}$" :data-parsley-pattern-message="$t('placeholder.name.pattern',[8])"
                               placeholder="">
                    </div>
                </div>
                <div class="form-group row text-center m-t-10">
                    <div class="col-12">
                        <button class="btn btn-block btn-gradient" type="button"
                                @click="register($event)">{{$t('register')}}
                        </button>
                    </div>
                </div>
            </form>
            <div class="row m-t-20">
                <div class="col-sm-12 text-center">
                    <div class="text-muted">
                        {{$t('have.account')}}
                        <router-link to="/login" class="text-dark m-l-5">
                            <b>{{$t('login')}}</b>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import CountDownBtn from '@/components/CountDownBtn.vue';

export default {
    name: 'register',
    layout: 'login',
    components: {
        CountDownBtn
    },
    data() {
        return {
            seconds: 0,
            mobile: '',
            inventCode: '',
            countryCode: '86',
            onlyCountry: this.onlyCountry
        }
    },
    created() {
        this.inventCode = this.$route.query.invent_code;
    },
    methods: {
        register: function (event) {
            const vm = this;
            let $form = $(event.target).closest('form');
            if ($form.parsley().validate()) {
                const api = vm.api;
                const http = vm.$http;
                const t = {
                    "ok": vm.$t('btn.ok'),
                    "msg_suc": vm.$t('msg.register.success'),
                    "msg_err": vm.$t('msg.register.fail')
                }

                http.post(api + 'UserLogin/register', $form.serialize())
                    .then(function (response) {
                        const data = response.data;
                        if ('0' === data.code) {
                            swal({
                                title: t.msg_suc,
                                icon: 'success',
                                button: {
                                    text: t.ok,
                                    className: 'btn btn-gradient',
                                }
                            }).then(() => {
                                vm.$router.push('/login')
                            })
                        } else {
                            swal({
                                title: t.msg_err,
                                text: data.msg,
                                icon: 'info',
                                button: {
                                    text: t.ok,
                                    className: 'btn btn-gradient',
                                }
                            })
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            }
        },
        captcha: function (event) {
            const vm = this;
            let $form = $(event.target).closest('form');
            if ($form.parsley().validate({group: 'captcha'})) {
                const api = vm.api;
                const http = vm.$http;
                const t = {
                    "ok": vm.$t('btn.ok'),
                    "msg": vm.$t('msg.captcha.send.fail')
                }
                vm.seconds = 90;

                http.get(api + 'GetMessage/register', {
                    params: {
                        mobile: this.mobile,
                        phonecode: this.countryCode
                    }
                }).then(function (response) {
                    const data = response.data;
                    if ('0' !== data.code) {
                        swal({
                            title: t.msg,
                            text: data.msg,
                            icon: 'info',
                            button: {
                                text: t.ok,
                                className: 'btn btn-gradient',
                            }
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
    }
}
</script>

<!--不需要权限-->
<route-meta>
    {
    "anon": true
    }
</route-meta>